<template>
    <div class="all">
        <u-navbar :title="book.bookTitle" :autoBack="true" @rightClick="starHandle" :placeholder="true"
            :rightIcon="rightIcon">
        </u-navbar>
        <div class="page">
            <div class="bookCover">
                <div class="blur" :style="'backgroundImage:url(' + book.coverImage + ')'">
                </div>
                <!-- <image :src="book.bookLink"></image> -->
                <u--image radius="6" width="10rem" height="15rem" :src="book.coverImage">
                    <template v-slot:loading>
                        <u-loading-icon color="black"></u-loading-icon>
                    </template>
                </u--image>
            </div>
            <div class="bookInfo">
                <div class="userInfo">
                    <div class="title">{{ book.bookTitle }}</div>
                </div>
                <div class="secondColumn">
                    <div class="newPrice">￥{{ book.curprice }} <div class="discountNum">二手 {{ discountNum }} 折</div>
                    </div>
                    <div class="user" @click="goOther">
                        <image :src="book.userImg"></image>
                        <span class="userName">{{ book.userName }}</span>
                    </div>

                </div>
                <div class="oldPrice item">
                    <span class="leftTitle">原价</span>
                    <span><span class="dupunkto">:</span>{{ book.price }}</span>
                </div>
                <div class="freight item">
                    <span class="leftTitle">邮费</span>
                    <span v-if="book.postage == '0'"><span class="dupunkto">:</span>包邮</span>
                    <span v-else><span class="dupunkto">:</span>￥{{ book.postage }}</span>
                </div>
                <div class="author item">
                    <span class="leftTitle">作者</span>
                    <span><span class="dupunkto">:</span>{{ book.author }}</span>
                </div>
                <div class="publisher item">
                    <span class="leftTitle">出版社</span>
                    <span><span class="dupunkto">:</span>{{ book.publisher }}</span>
                </div>
                <div class="publishTime item">
                    <span class="leftTitle">出版</span>
                    <span><span class="dupunkto">:</span>{{ book.publisherTime }}</span>
                </div>
                <div class="ISBN item">
                    <span class="leftTitle">ISBN</span>
                    <span><span class="dupunkto">:</span>{{ IBSNformat(book.ISBN) }}</span>
                </div>
            </div>
            <!-- 豆瓣评分 -->
            <div class="doubanScore">
                <span>豆瓣评分 : {{ book.score }}</span>
                <div class="score">
                    <u-rate activeColor="#00e087" :value="book.score / 2" readonly :allowHalf="true"></u-rate>
                    <u-icon name="arrow-right" color="#999"></u-icon>
                </div>
            </div>
            <!-- 用户信息 -->

            <!--简介和目录 -->
            <div class="introDirectory">
                <div class="introTitle">简介</div>
                <div class="introContent">{{ book.summary }}</div>
                <div class="userBookInfo">{{ book.describe }}</div> <!-- 用户自定义的书籍信息 -->
            </div>

            <!-- 用户上传的书籍图片 -->
            <div class="bookImg" v-for="item, index in book.imageList" :key="index">
                <image :src="item"></image>
            </div>
            <!-- 顶开底部TabBar -->
            <div class="SuchElements"></div>
        </div>
        <div class="tabBarDetail" v-if="!isMine">
            <u-icon color="#999" class="icon chat" name="chat" size="36"></u-icon>
            <div class="icon">
                <u-badge class="badge" :offset="['1rem', '17.5rem']" absolute max="99" :value="cartNum"></u-badge>
                <u-icon color="#999" class="icon" name="shopping-cart" @click="goCart" size="36">
                </u-icon>
            </div>
            <u-button class="button" @click="addCart" :disabled="cartText == '已加入购物车'" :text="cartText"
                :hairline="false" shape="circle" size="large"></u-button>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import _ from 'lodash'
export default {

    onShow() {
        // 初始化一些数据
        this.initData()
    },
    data() {
        return {
            isMine: false,
            book: '',//书籍详情，来自于Vuex仓库
            rightIcon: 'bookmark',//右侧按钮图标star-fill
            cartText: '加入购物车',// 购物车文字提示
        }
    },
    computed: {
        ...mapGetters(['cartNum', 'checkBook']),
        // 将IBSN码格式化展示
        IBSNformat() {
            return function (IBSN) {
                if (IBSN.length == 10) {
                    return IBSN.substring(0, 3) + '-' + IBSN.substring(3, 6) + '-' + IBSN.substring(6, 10)
                } else {
                    return IBSN.substring(0, 3) + '-' + IBSN.substring(3, 4) + '-' + IBSN.substring(4, 8) + '-' + IBSN.substring(8, 11) + '-' + IBSN.substring(11, 12)
                }
            }
        },
        //计算折扣
        discountNum() {
            let newPrice = parseFloat(this.book.curprice)
            let oldPrice = parseFloat(this.book.price)
            console.log(newPrice, oldPrice)
            return parseInt((1 - (oldPrice - newPrice) / oldPrice) * 100) / 10
        }
    },
    methods: {
        initData() {

            this.book = this.$store.state.book.currentBook || {}
            console.log(this.book)
            this.cartText = this.checkBook(this.book.id) ? '已加入购物车' : '加入购物车'
            this.isMine = this.book.userId == this.$store.state.user.userInfo.id ? true : false
            if (this.isMine) {
                this.rightIcon = 'edit-pen'
            } else {
                this.$store.dispatch('addHistory', this.book.id)
                this.rightIcon = this.book.isCollection ? 'bookmark-fill' : 'bookmark'
            }

        },
        goOther() {
            if (this.isMine) {
                this.$Router.push({
                    name: 'personpage'
                })
                return;
            }
            this.$store.dispatch('getOtherInfo', this.book.userId)
            this.$store.dispatch('getOtherInfoBook', this.book.userId)
            this.$Router.push({
                name: 'other',
            })
        },
        // 去购物车
        goCart() {
            this.$Router.push({
                name: 'cart',
            })
        },
        addCart() {
            let data = {
                bookId: this.book.id,
                bookTitle: this.book.bookTitle,
                author: this.book.author,
                price: this.book.curprice,
                postage: this.book.postage,
                coverImage: this.book.coverImage
            }

            this.$store.dispatch('addCart', data)
            // this.$store.commit('ADD_CART', this.book)
            // this.cartNum++
            this.cartText = '已加入购物车'
        },
        starHandle: _.debounce(function (e) {

            if (this.rightIcon == 'bookmark') {
                this.$store.dispatch('addedToCollection', this.book.id).then(res => {
                    if (res == 'success') {
                        this.$tools.toast('收藏成功')
                        this.rightIcon = 'bookmark-fill'
                    } else {
                        this.$tools.toast('收藏失败')
                    }
                })
            } else if (this.rightIcon == 'bookmark-fill') {
                this.$store.dispatch('removeCollection', this.book.id).then(res => {
                    if (res == 'success') {
                        this.$tools.toast('取消收藏成功')
                        this.rightIcon = 'bookmark'
                    } else {
                        this.$tools.toast('取消收藏失败')
                    }
                })
            } else {
                console.log(this.book)
                this.$store.commit('SET_CURRENT_BOOK', this.book)
                this.$Router.push({
                    name: 'entryBooks'
                })
            }
        }, 500),

    }
}
</script>

<style lang="scss">
page {
    width: 100%;
    height: 90%;

    .all {
        height: 100%;
        width: 100%;

        .page {
            height: 100%;
            width: 100%;
            margin-bottom: 4rem;

            .bookCover {
                width: 100%;
                height: 35%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;

                .blur {
                    position: absolute;
                    width: 100%;
                    height: 35%;
                    // 背景模糊
                    filter: blur(15px);
                    background-size: 400% 400%;
                    background-position: center;
                    z-index: 1;
                    //    裁剪成正方形
                    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
                }

                image {
                    position: absolute;
                    z-index: 2;
                    width: 8rem;
                    height: 12rem;

                }

            }

            .bookInfo {
                padding: 0.5rem;
                padding-top: 0.5rem;
                margin-top: 1rem;
                width: 100%;
                background: white;

                .userInfo {
                    display: flex;
                    flex-direction: column;
                    margin: 1rem 0.5rem;

                    .title {
                        font-size: 1.5rem;
                        display: inline-block;
                    }
                }

                .secondColumn {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .user {

                        // width: 5rem;
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-end;
                        align-items: center;
                        margin-right: 1.5rem;

                        image {
                            width: 2rem;
                            height: 2rem;
                            border-radius: 50%;
                        }

                        .userName {
                            display: inline-block;
                            padding-left: 0.5rem;
                        }
                    }

                    .newPrice {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        font-size: 1.2rem;
                        font-weight: bold;
                        color: black;

                        .discountNum {
                            font-weight: normal;
                            border-radius: 0.3rem;
                            margin-left: 0.5rem;
                            border: 1px solid $uni-color-theme-8;
                            padding: 0.2rem 0.5rem;
                            font-size: 0.8rem;
                            color: $uni-color-theme-8;
                        }
                    }
                }

                .item {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-top: 0.5rem;
                    font-size: 0.8rem;

                    .leftTitle {
                        display: inline-block;
                        width: 2.5rem;
                        font-size: 0.6rem;
                        color: $uni-text-color-placeholder;
                    }

                    .dupunkto {
                        display: inline-block;
                        padding-right: 0.2rem;
                        font-size: 0.6rem;
                        color: $uni-text-color-placeholder;
                    }

                }
            }

            .doubanScore {
                padding-left: 0.5rem;
                height: 2rem;
                background: white;
                display: flex;
                justify-content: space-between;
                flex-direction: row;
                align-items: center;
                margin-top: 0.5rem;
                font-size: 0.8rem;
                color: $uni-color-theme-11;

                .score {
                    // width: 70%;
                    display: flex;
                    flex-direction: row;
                    justify-content: right;
                    margin-right: 0.5rem;
                }
            }

            .introDirectory {
                padding: 0.5rem;
                padding-top: 0;
                margin-top: 0.5rem;
                width: 100%;
                // height: 12.5rem;
                background: white;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: left;
                font-size: 0.8rem;
                color: $uni-text-color-placeholder;

                .introTitle {
                    font-size: 1rem;
                    font-weight: bold;
                    margin-top: 0.5rem;
                }

                .introContent {
                    margin-top: 0.5rem;
                }

                .author {
                    margin-top: 0.5rem;
                }

                .authorInfo {
                    margin-top: 0.5rem;
                }

                .directory {
                    margin-top: 0.5rem;
                }

                .userBookInfo {
                    margin-top: 0.5rem;
                }
            }

            .bookImg {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                image {
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-position: center;
                }
            }

            .SuchElements {
                width: 100%;
                height: 4.5rem;
            }
        }

        .tabBarDetail {
            width: 100%;
            height: 4.5rem;
            background: white;
            position: fixed;
            bottom: 0;
            border-top: 1px solid $uni-text-color-grey;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

            .chat {
                margin-left: 1rem;
                border-right: 1px solid $uni-text-color-grey;
            }

            .icon {
                // margin-left: 1rem;
                width: 3rem;
                height: 2.5rem;
                margin-right: 0.5rem;

            }

            .button {
                margin-right: 1rem;
                width: 80%;
                background: $uni-color-theme-11;
                color: white;
                font-size: 0.8rem;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }

        }
    }
}
</style>